<template>
  <div id="my-nav">
    <el-menu :default-active="this.$route.path" router class="el-menu-demo" mode="horizontal">

      <!-- logo-->
      <a class="logo">
        <a href="/"><img src="../public/img/logo.jpg" width="80px" height="50px" alt="logo" /></a>
      </a>

      <!-- 导航栏-->
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>

      <!-- 搜索框-->
      <div class="search">
        <el-autocomplete class="inline-input" v-model="searchText" :fetch-suggestions="querySearchAsync"
                         placeholder="请输入内容"></el-autocomplete>
      </div>

      <!-- 登录，注册，用户头像-->
      <div class="other">

        <!-- 用户头像  -->
        <div v-if="this.$store.state.isLogin">

          <el-popover placement="bottom" width="100%" trigger="hover">
            <ul class="user">
              <router-link to="/user" tag="li" >个人主页</router-link>
              <router-link to="/update" tag="li" >个人设置</router-link>
              <router-link to="/music" tag="li" >我的音乐</router-link>
              <li @click="exit">退出登录</li>
            </ul>
            <el-avatar slot="reference" style="width: 40px; height: 40px" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="user avatar"/>
            </el-avatar>
          </el-popover>

        </div>

        <!-- 登录，注册-->
        <div v-else>
          <router-link to="/login" tag="button" class="el-button">登录</router-link>
          <router-link to="/register" tag="button" class="el-button">注册</router-link>
          <!--  另一种登录注册按钮模板-->
          <!--   <el-button type="primary" round>登录</el-button>-->
          <!--   <el-button type="primary" round>注册</el-button>-->
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "MyNav",

  beforeMount() {
    let defaultUserId = this.$cookies.get('defaultUserId');

    let user = this.$cookies.get(defaultUserId); // 初始化用户对象

    if (user) {
      this.$store.state.isLogin = true;
    }
  },

  mounted() {
    this.searchResult = this.loadAll();
  },

  data () {
    return {
      activeIndex: '1',
      navList:[
        {name:'/home', navItem:'首页'},
        {name:'/list', navItem:'榜单'},
        {name:'/songSheet', navItem:'歌单'},
        {name:'/singer', navItem:'歌手'},
        {name:'/musician', navItem:'音乐人'},
        {name:'/music', navItem:'我的音乐'},
      ],
      // 搜索框输入的文本
      searchText: '',
      // 根据搜索框的输入而返回的文本
      searchResult: [],
      // 定时器
      timeout: null,
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      let searchResult = this.searchResult;
      let results = queryString ? searchResult.filter(this.createFilter(queryString)) : searchResult;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 2000 * Math.random());
    },

    createFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    loadAll() {
      return [
        { "value": "模特", "address": "李荣浩" },
        { "value": "李白", "address": "李荣浩" },
        { "value": "演员", "address": "薛之谦" },
        { "value": "我们的光芒", "address": "南征北战NZBZ" },
        { "value": "王妃", "address": "萧敬腾" },
        { "value": "刚刚好", "address": "薛之谦" },
        { "value": "月亮惹的祸", "address": "张宇" },
        { "value": "三国", "address": "林俊杰" },
        { "value": "烟花易冷", "address": "林志炫" },
        { "value": "风云决", "address": "任贤齐" },
        { "value": "起风了", "address": "吴青峰" },
        { "value": "不潮不用花钱", "address": "林俊杰" },
        { "value": "Someone like you", "address": "Adele" },
        { "value": "往后余生", "address": "马良、孙茜茹" },
        { "value": "That Girl", "address": "Olly Murs" },
        { "value": "Horizon", "address": "janji" },
        { "value": "我的梦", "address": "张靓颖" },
        { "value": "人生不过一百年", "address": "袁接伟" },
        { "value": "跨域时空的念想", "address": "和田薰" },
        { "value": "海阔天空", "address": "BEYOND" },
        { "value": "浮夸", "address": "陈奕迅" },
        { "value": "浮夸", "address": "林志炫" },
        { "value": "Hoot", "address": "少女时代" },
        { "value": "旧梦一场", "address": "阿悠悠" },
        { "value": "明月天涯", "address": "五音JW" },
        { "value": "超兽武装", "address": "刘罡、陈洁丽" },
        { "value": "红玫瑰", "address": "陈奕迅" },
        { "value": "Shape of you", "address": "Ed Sheeran" },
        { "value": "七里香", "address": "周杰伦" },
        { "value": "寂寞沙洲冷", "address": "周传雄" },
        { "value": "关不上的窗", "address": "周传雄" },
        { "value": "黄昏", "address": "周传雄" },
        { "value": "冬天的秘密", "address": "周传雄" },
        { "value": "喜剧之王", "address": "李荣浩" },
        { "value": "流浪记", "address": "杨宗纬" },
        { "value": "一吻天荒", "address": "胡歌" },
        { "value": "我好像在哪见过你", "address": "薛之谦" },
        { "value": "洋葱", "address": "杨宗纬" },
        { "value": "凉凉", "address": "杨宗纬、张碧晨" },
        { "value": "我的天空", "address": "南征北战NZBZ" },
        { "value": "隐", "address": "河图" },
        { "value": "雨一直下", "address": "天山西路428号" },
        { "value": "福荣祥烧腊（平溪路店）", "address": "张宇" },
        { "value": "发如雪", "address": "周杰伦" },
        { "value": "稻香", "address": "周杰伦" },
        { "value": "青花瓷", "address": "周杰伦" },
        { "value": "新贵妃醉酒", "address": "李玉刚" },
        { "value": "清明上河图", "address": "李玉刚" }
      ];
    },

    // 退出登录
    exit () {
      let user = this.$cookies.get('user');

      this.$store.commit('changeIsLogin', false);
      // this.$store.state.isLogin = false;
      user.isLogin = false;

      // 更新 cookie
      this.$cookies.set('user', user);
      // 跳转到首页
      this.$router.push('/home');
    }
  },

}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}


.logo {
  float: left;
  width: 80px;
  height: 50px;
}

.search {
  display: inline-block;
  margin-top: 10px;
  margin-left: 40px;
}

.other {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  height: 40px;
}

//登录注册按钮
.el-button {
  margin-left: 20px;
}


.user {
  padding: 0;
  list-style: none;

  li {
    padding: 8px;
    text-align: center;
    cursor: pointer;
  }

  li:hover {
    color: white;
    background-color: #409EFF;
  }
}
</style>